.header{
	.ci-nav{
		a {
		    text-align: center;
		    color: rgba(255, 255, 255, .75);
		    padding: .5rem 1rem;
		    padding-top: .75rem;
		    padding-bottom: .75rem;
		    font-size: .875rem;
		    color: #6c757d;
		    &:hover,
		    &.active{
		    	color: #5FB878;
		    }
		}
		.swiper-slide{
		    width:auto;
		}
		.swiper-box{
		    padding: 0 42px;
		}
	}
}
.body{
	.subscribe-tab {
	    background: #fff;
	    padding: 45px 0 0 0;
	    box-shadow: 0 2px 9px 0 rgba(0,0,0,.05);
	    border: 1px solid #e6e8eb;
	    position: relative;
	    .subscribe-header{
	    	padding: 0 25px;
	    	.subscribe-tab-title {
				    color: #2e3033;
				    margin-bottom: 8px;
				}
				.subscribe-tab-time {
				    margin-bottom: 25px;
				    span {
						    font-size: .75rem;
						    color: #959da6;
						    line-height: 18px;
						    margin-right: 10px;
						}
				}
	    }
	    
			.subscribe-footer {
			    background: #f5f6f7;
			    p {
					    margin-left: 25px;
					    font-size: .75rem;
					    color: #5c6166;
					    line-height: 45px;
					    display: flex;
					    align-items: center;
					}
			}
	}
	.slide{
		.slide-item{
			position: relative;
	    overflow: hidden;
	    border-radius: 4px; 
	    div{
			    transition: all .4s;
			    background-image: linear-gradient(180deg,rgba(0,0,0,.5),#000);
			    opacity: .5;
			    height: 100%;
			    width: 100%;
			    position: absolute;
			    top: 0;
			    left: 0;
			    &:hover{
					    opacity: .75;
					}
			}
			img{
			    margin-left: 50%;
			    transform: translateX(-50%);
			    max-height: 302.3px;
			    min-height: 302.3px;
			}
			h2{
				a{
			    position: absolute;
			    font-size: 1.1875rem;
			    color: #fff;
			    line-height: 32px;
			    font-weight: 500;
			    margin: 0 20px;
			    bottom: 120px;
			    z-index: 1;
				}
			}
			p{
				a{
			    position: absolute;
			    bottom: 40px;
			    opacity: .8;
			    font-size: .8125rem;
			    color: #fff;
			    -ms-flex-direction: column;
			    flex-direction: column;
			    line-height: 19px;
			    margin: 0 20px;
			    overflow: hidden;
			    height: 57px;
			    display: -webkit-box;
			    display: -moz-box;
			    text-overflow: ellipsis;
			    -webkit-line-clamp: 3;
			    -moz-line-clamp: 3;
			    line-clamp: 3;
			    box-orient: vertical;
			    z-index: 1;
			  }
			}
		}
	}
	.topic{
		.topic-tags{
			display: flex;
	    flex-wrap:wrap;
	    transition: all .5s ease 0s;
	    margin-top:15px;
	    li {
			    margin-right: 12px;
			    margin-bottom: 6px; 
			    cursor: pointer;
			    a {
					    height: 2rem;
					    line-height: 2rem;
					    display: inline-block;
					    background: #f5f6f7;
					    border-radius: 2px;
					    text-align: center;
					    color: #5c6166;
					    padding-left:8px; 
					    padding-right:8px; 
					    &:hover {
							    background: #e1e5e8;
							}
					} 
					&:last-child a{
					    border-radius: 50%;
					}
			}
		}
	}
	.post-info{
	    margin-bottom: 10px;
	    span{
			    font-size: .875rem;
			    margin-bottom: 8px;
			    margin-right: 8px;
			    .cat{
					    color: #009688;
					}
					.top{
					    color: #1E9FFF;
					}
			}
	}
	.post-like{
	    margin:15px 8px 15px 0;
	    span{
			    color: #959da6;
			    margin-bottom: 8px;
			    margin-right: 8px;
			}
	}
	.posts{
		.post-item{
		    border-bottom:1px dashed #f2f2f2;
		    .post-body{
				    display: flex;
				    justify-content: space-between;
				    align-items: center;
						.post-title{
						    color: #2F4056;
						    line-height: 1.5rem;
						    margin-bottom: 8px;
						    text-overflow: ellipsis;
						    display: -webkit-box;
						    box-orient: vertical;
						    -webkit-box-orient: vertical;
						    -webkit-line-clamp: 3;
						    line-clamp: 3;
						    overflow: hidden;
						    a{
						    	display: block;
						    	transition: all .15s;
						    	&:hover{
								    color: #111;
									}
						    }
						}
						p {
						    font-size: .8125rem;
						    color: #959da6;
						    line-height: 23px;
						    height: 69px;
						    max-width: 745px;


						    text-overflow: ellipsis;
						    display: -webkit-box;
						    box-orient: vertical;
						    -webkit-box-orient: vertical;
						    -webkit-line-clamp: 3;
						    line-clamp: 3;
						    overflow: hidden;
						}
						.post-right{
						    min-width: 120px;
						    height: 95px;
						    overflow: hidden;
						    border-radius: 4px;
						    position: relative;
						    margin-left: 15px;

						    display: flex;
						    justify-content: center;
						    align-items: center;
						    .heightsuit {
								    height: 100%;
								    position: absolute;
								    left: 50%;
								    transform: translateX(-50%);
								    transition: all .5s ease-out .1s;
								}
								&:hover .heightsuit{
								    height: 120%;
								}
						}
				}
		}
	}
	.author{
		.author-wrap{
		    display: flex;
		    flex-wrap: wrap;
		    .author-item{
				    padding: 15px 0;
				    display: flex;
				    max-width: 270px;
				    min-width: 150px;
				    border-bottom: 1px solid #f2f2f2;
				    &:last-child{
						    border:none;
						}
						.avatar{
						    width: 45px;
						    height: 45px;
						    margin-right: 10px;
						    border-radius: 50%;
						    overflow: hidden;

						    display: flex;
						    justify-content: center;
						    align-items: center;
						    img{
								    width: 100%;
								    height: 100%;
								    transition: all .5s ease-out .1s;
								}
						    &:hover img{
								    width: 120%;
								    height: 120%;
								}
						}
						.author-info{
						    display: flex;
						    flex-direction: column;
						    justify-content: space-between;
						    h3{
								    font-size: .875rem;
								    color: #333;
								}
								p{
								    font-size: .75rem;
								    color: #969696;
								}
						}
				}
		}
	}
	.tags{
		.tags-wrap {
		    display: flex;
		    flex-wrap: wrap;
		    margin-top: 20px;
		    margin: 20px -20px 0 0;
		    a {
				    width: 64px;
				    height: 32px;
				    line-height: 32px;
				    display: inline-block;
				    border-radius: 2px;
				    font-size: .75rem;
				    background: #e1e5e8;
				    text-align: center;
				    margin: 0 12px 20px 0;
				    &:hover {
						    background: #dadde0;
						    color: #111;
						}
				}
		}
	}
	.mediums{
		display: flex;
		flex-wrap: wrap;
		align-content:space-between;
		.medium-wrap{
		    margin-bottom:15px;
		    margin-right: 20px;
		    max-width: 315px;
		    .medium-card{
			    background: #f5f6f7;
			    padding: 20px;
			    box-shadow: 0 2px 9px 0 rgba(0,0,0,.05);
			    border: 1px solid #e6e8eb;
			    position: relative;
				} 
		}
	}
	.medium-card{
		padding: 20px;
    border-radius: 8px;
    .medium-top{
		    display: flex;
		    justify-content: space-between;
		    &>div{
				    display: flex;
				    align-items: center;
				    cursor: pointer;
				    margin-right: 25px;
				    img{
						    border-radius: 4px;
						    width: 30px;
						    height: 30px;
						}
						h3 {
						    font-size: .8125rem;
						    color: #2e3033;
						    line-height: 20px;
						    margin-left: 10px;
						    &:hover{
								    color: #111;
								}
						}
				}
				&>a {
				    width: 66px;
				    height: 27px;
				    line-height: 27px;
				    text-align: center;
				    cursor: pointer;
				    font-size: .75rem;
				    &.focus {
							color: #fff;
							text-align: center;
							background-image: linear-gradient(119deg,#61c2fd,#328ffa);
							border-radius: 3px;
						}

						&.unfocus {
						    border-radius: 2px;
						    border: 1px solid #e9e9e9;
						    border-radius: 3px;
						    color: #999896;
						    text-align: center;
						}
				}
		}
		.medium-bottom{
		    font-size: .75rem;
		    color: #959da6;
		    line-height: 18px;
		    margin-top: 10px;
		    margin-bottom: 20px;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 1;
		}
	}
	.topic-state{
		.topic-logo{
			display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    flex: 1;
	    cursor: pointer;
	    border-right: 1px dashed #dddddd;
	    img{
			    width: 55px;
			    height: 55px;
			    border-radius: 3px;
			}
			h2 {
			    font-size: .9375rem;
			    color: #2e3033;
			    line-height: 22px;
			    font-weight: 500;
			    margin-top: 10px;
			    text-align: center;
			}
		}
		.topic-info{
			flex: 1;
			p {
			    font-size: .875rem;
			    color: #666;
			    line-height: 18px;
			    margin-top: 15px;
			}
		}
	}
	.cloud-tags{
		display: flex;
		flex-wrap: wrap;
		align-content:space-between;
		.tag-item{
				margin-bottom:15px;
		    margin-right: 20px;
		    max-width: 315px;
		}
	}

}
.footer {
    margin: 50px 0 0;
    padding: 20px 0;
    line-height: 30px;
    text-align: center;
    color: #fff;
    border-top: 1px solid #e2e2e2;
    background-color: #393D49;
    a {
	    padding: 0 6px;
	    font-weight: 300;
	    color: #fff;
	}
}

